<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { GetMostAlarmsDevice } from '@/api/home'
defineProps({
  num: {
    type: Number,
    default: 0
  }
})

// 分页
const pageInfo = reactive({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 数据源
const tableData: any = ref([])

// 定义函数
onMounted(() => {
  getMaxWarnData()
})

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}

// 获取表格数据
const getMaxWarnData = async () => {
  tableData.value = []
  let params = {
    Sorting: 'numberOfAlarms desc',
    SkipCount: (pageInfo.pageNum - 1) * pageInfo.pageSize,
    MaxResultCount: pageInfo.pageSize
  }
  let res = await GetMostAlarmsDevice(params)
  pageInfo.total = res.result.totalCount
  tableData.value = [ ...res.result.items ]
  console.log('报警最多页面接口信息---->', res)
}

// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  pageInfo.pageSize = val
  getMaxWarnData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getMaxWarnData()
}

// 向外暴露的函数与变量
defineExpose({
  getMaxWarnData
})
</script>

<template>
  <div class="table-box">
    <el-table
      :cell-style="cellStyle"
      :header-cell-style="headStyle"
      :data="tableData"
      max-height="640"
      size="small"
    >
      <el-table-column
        prop="date"
        label="所属堆取料机"
      />
      
      <el-table-column
        prop="address"
        label="设备"
      />
      
      <el-table-column
        prop="name"
        label="数量"
      />
    </el-table>
  </div>
  <div class="pagination-box">
    <el-pagination
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handlePlanSizeChange"
      @current-change="handlePlanCurrentChange"
    />
  </div>
</template>

<style scoped lang=scss>
.table-box {
  padding: 0 15px;
}

.pagination-box {
  margin-top: 10px;
  padding: 0 15px;
}
</style>